<template>
  <div class="homeindex">
    <div class="indexContent" id="indexContent">
      <!-- <web-map ref="homeMap" :target="'indexContent'"></web-map> -->
      <web-map ref="homeMap" :target="'indexContent'"></web-map>
    </div>

    <div class="homeBox">
      <header class="searchbox">
        <el-row class="searchCp">
          <el-col :span="4">
            <img src="../assets/img/searchLogo.png" alt="">
          </el-col>
          <el-col :span="16">
            <el-input placeholder="搜索关键信息" v-model="keyInput" clearable> </el-input>
          </el-col>
          <el-col :span="4" class="searchIcon">
            <el-tooltip class="item" effect="dark" content="搜索" placement="bottom">
              <i class="el-icon-search"></i>
            </el-tooltip>
          </el-col>
        </el-row>
      </header>

      <div class="cityBox">
        <el-col :span="24">
          <el-dropdown trigger="click" @command="cityClick">
            <span class="el-dropdown-link">
              {{currentCity}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="全国">全国</el-dropdown-item>
              <el-dropdown-item command="长沙">长沙</el-dropdown-item>
              <el-dropdown-item command="北京">北京</el-dropdown-item>
              <el-dropdown-item command="上海">上海</el-dropdown-item>
              <el-dropdown-item command="广州">广州</el-dropdown-item>
              <el-dropdown-item command="深圳">深圳</el-dropdown-item>
              
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </div>
    </div>
    
      
  </div>
</template>  

<script>
  import WebMap from '@/components/map/indexMap.vue'
  import { Map, View } from "ol"
  import ol from "openlayers"
  import mapConfig from '@/components/map/config/mapConfig'

  export default {
    name: 'home',
    components: {
      WebMap,
    },
    data() {
      return {
        keyInput: '',
        currentCity: '长沙',
        cityList: [
          {name: '长沙', center: [112.964083, 28.1953]},
          {name: '北京', center: [116.585993,39.878704]},
          {name: '上海', center: [121.551814,31.356624]},
          {name: '广州', center: [113.33404,23.042517]},
          {name: '深圳', center: [114.081111,22.536085]}
        ]
      }
    },
    mounted() {
      console.log('home', this.$refs.homeMap,)
      
    },
    methods: {
      cityClick(command) {
        console.log('cityClick', this.currentCity, command)
        this.currentCity = command
        console.log('--------------', this.$refs.homeMap,)
        if(command == '长沙') {
          this.$refs.homeMap.doCityCenter([112.964083, 28.1953], 9)
        } else if(command == '北京') {
          this.$refs.homeMap.doCityCenter([116.585993,39.878704], 9)
        } else if(command == '上海') {
          this.$refs.homeMap.doCityCenter([121.551814,31.356624], 9)
        } else if(command == '广州') {
          this.$refs.homeMap.doCityCenter([113.33404,23.042517], 9)
        } else if(command == '深圳') {
          this.$refs.homeMap.doCityCenter([114.081111,22.536085], 9)
        } else {
          this.$refs.homeMap.doCityCenter([116.585993,39.878704], 4)
        }
        
        // let map = new Map({
        //   // target: mapcontainer,
        //   layers: mapConfig.mapCfg.streetmap(),
        //   // interactions: ol.interaction.defaults(mapConfig.mapInteractionCfg),
        //   view: new View({
        //     projection: "EPSG:4326",    //使用这个坐标系
        //     // projection: "EPSG:3857",    //使用这个坐标系
        //     center: [116.585993,39.878704], 
        //     zoom: mapConfig.mapCfg.zoom
        //   })
        // });
        
      },
    }
  };
</script>


<style lang="less">
*{padding:0; margin:0;}
html,body{
  height: 100%;
}
.homeindex {
  height: 100%;
  .indexContent {
    height: 100%;
  }

  .homeBox {
    // position: relative;
    width: 100%;
    
    .searchbox {
      position: absolute;
      top: 10px;
      left: 60px;
      width: 360px;
      z-index: 1100;
      border-top-left-radius: 3px;
      color: #5f6477;
      background: #fff;
      box-shadow: 0 2px 2px rgba(0,0,0,.15);
      border-radius: 3px;

      .searchCp {
        cursor: pointer;
      }

      img {
        padding: 5px 15px;
        width: 30px;
        height: 30px;
      }

      .searchIcon {
        padding: 10px 20px;
      }
    }

    .cityBox {
      position: absolute;
      top: 15px;
      left: 440px;
      width: 80px;
      height: 30px;
      padding: 5px 22px;
      z-index: 1100;
      color: #5f6477;
      background: #fff;
      box-shadow: 0 2px 2px rgba(0,0,0,.15);
      border-radius: 3px;
    }
  }

  
}

</style>>

